<section class="card manual">
    <div class="card-header">
        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
    </div>
    <div class="card-body">
        <p ng-if="canDrag"><span class="text-warning" ng-bind="translate('warning_can_not_drag_drop',true, '(**Drag Drop only allow when order by priority asc)')"></span></p>
        <table id="list-page" class="table table-sm table-hover" dnd-list="data.items" dnd-disable-if="canDrag" cellspacing="0" ng-init="getList()">
            <thead class="thead-light">
                <tr>
                    <th scope="col" width="4%">
                        <span class="oi oi-sort-ascending"></span>
                    </th>
                    <th scope="col" width="20%">
                        Title
                    </th>
                    <th scope="col">
                        Description
                    </th>
                    <th scope="col" width="15%">
                        Created Date
                    </th>
                    <th scope="col" width="10%">
                        By
                    </th>
                    <th scope="col" width="5%" class="text-right">Actions</th>
                </tr>
            </thead>

            <tbody ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move" dnd-selected="selected = item" dnd-moved="updateInfos($index)" ng-class="{'selected': selected === item}" style="border: 1px;">
                <tr class="" sort-model="category" sort-model-id="{{item.id}}">
                    <td style="cursor:move;" class="drag-header">
                        <span class="fas fa-sort"></span>
                    </td>

                    <td>
                        {{item.title}}
                    </td>
                    <td>
                        <small>
                            {{shortString(item.excerpt,50)}}
                        </small>
                    </td>
                    <td>
                        <small>
                            {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                        </small>
                    </td>
                    <td>
                        {{item.createdBy}}
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">

                            <a ng-if="item.childs.length>0" class="btn btn-light" data-toggle="collapse" role="button" ng-click="showChilds(item.id)">
                                <span class="fa fa-list text-primary"></span>
                            </a>

                            <a href="/portal/page/details/{{item.id}}" class="btn btn-light">
                                <span class="fas fa-pencil-alt text-primary"></span>
                            </a>
                            <a href="{{item.detailsUrl}}" target="_blank" class="btn btn-light"><span class="fa fa-eye text-primary"></span></a>
                            <a ng-if="item.type==2" href="/portal/page/page-article/list/{{item.id}}" class="btn btn-light">
                                <span class="fas fa-list text-info"></span>
                            </a>
                            <!-- 
                                        <a ng-if="item.type==2" href="#" data-toggle="modal" data-target="#modal-articles" class="btn btn-light">
                                            <span class="fas fa-list text-info"></span>
                                        </a>-->
                            <a class="btn btn-light" ng-click="remove(item.id)">
                                <span class="fa fa-times text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" style="padding:0">
                        <div class="collapse" id="childs-{{item.id}}">
                            <table class="table table-sm table-hover mb-0" cellspacing="0" style="background-color: #f5f5f5;" ng-if="item.childs.length>0">
                                <thead style="font-size:small; font-weight:normal">
                                    <tr>

                                        <td style="cursor:move;" class="drag-header">
                                            <span class="fas fa-sort"></span>
                                        </td>
                                        <th scope="col" width="20%">
                                            Title
                                        </th>
                                        <th scope="col">
                                            Description
                                        </th>
                                        <th scope="col" width="15%">
                                            Created Date
                                        </th>
                                        <th scope="col" width="10%">
                                            Created By
                                        </th>

                                        <th scope="col" width="5%" class="text-right">Actions</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr ng-repeat="c in item.childs">

                                        <td style="cursor:move;" class="drag-header">


                                            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                                                <button ng-click="goUp(item.childs, $index)" type="button" class="btn btn-link"><span class="fa fa-sort-up small"></span></button>
                                                <button ng-click="goDown(item.childs, $index)" type="button" class="btn btn-link"><span class="fa fa-sort-down small"></span></button>
                                            </div>
                                        </td>
                                        <td>
                                            <span ng-bind="c.page.title"></span>
                                        </td>
                                        <td>
                                            <span class="small" ng-bind="shortString(c.page.excerpt,50)"></span>
                                        </td>
                                        <td>
                                            <small>
                                                {{c.createdDateTime | utcToLocal:'dd.MM.yy - hh:mm a'}}
                                            </small>
                                        </td>
                                        <td>
                                            {{c.page.createdBy}}
                                        </td>

                                        <td>
                                            <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                                                <a href="/portal/page/details/{{c.id}}" class="btn btn-light"><span class="fa fa-pen text-primary small"></span></a>
                                                <a href="{{c.detailsUrl}}" target="_blank" class="btn btn-light"><span class="fa fa-eye text-primary small"></span></a>
                                                <a ng-if="c.page.type==2" href="/portal/page/page-article/list/{{c.page.id}}" class="btn btn-light">
                                                    <span class="fas fa-list text-info"></span>
                                                </a>
                                                <a ng-click="remove(item.id);" class="btn btn-light">
                                                    <span class="fas fa-times text-danger"></span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="getList(page-1)" scroll-top="true"></paging>
    </div>



</section>
